<template>
   <div class="progress">
            <div class="progress-item" :class="props.index >= 1 ?'active':''">
                <span>
                    1.开始备课
                </span>
            </div>
            <div class="progress-item" :class="props.index >= 2 ?'active':''">
                <span>
                    2.生成教学目标
                </span>
            </div>
            <div class="progress-item" :class="props.index >= 3 ?'active':''">
                <span>
                    3.生成教学PPT
                </span>
            </div>
        </div>
</template>
<script setup>
import router from '@/router';

const props = defineProps({
    index: {
        type: [Number,String],
        default: 0
    }
})
</script>

<style scoped>
.progress{
    width: 1024px;
    height: 50px;
    display: flex;
}
.progress-item{
    width: 200px;
    height: 40px;
    display: flex;
background-image: url('../assets/images/xingzhuang.png');
background-size: 200px; /* 请将 '特定宽度值' 替换为你想要的具体宽度，例如 '200px'，也可以使用百分比如 '50%' */
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
}
.progress-item span{
    font-size: 18px;
}
.active{
    background-image: url('../assets/images/xingzhuang2.png');
    color: #fff;
}
</style>